/*
 * Copyright 1999-2018 Alibaba Group Holding Ltd.
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *      http://www.apache.org/licenses/LICENSE-2.0
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from 'react';
import PropTypes from 'prop-types';
import {
  Button,
  Field,
  Form,
  Grid,
  Input,
  Loading,
  Pagination,
  Table,
  ConfigProvider,
} from '@alifd/next';
import {request} from '../../../globalLib';
import RegionGroup from '../../../components/RegionGroup';

import './ClusterNodeList.scss';

const FormItem = Form.Item;
const {Row, Col} = Grid;
const {Column} = Table;

@ConfigProvider.config

class ClusterNodeList extends React.Component {
  static displayName = 'ClusterNodeList';

  static propTypes = {
    locale: PropTypes.object,
  };

  constructor(props) {
    super(props);
    this.state = {
      loading: false,
      total: 0,
      pageSize: 10,
      currentPage: 1,
      keyword: '',
      dataSource: [],
    };
    this.field = new Field(this);
  }

  openLoading() {
    this.setState({loading: true});
  }

  closeLoading() {
    this.setState({loading: false});
  }

  openEditServiceDialog() {
    try {
      this.editServiceDialog.current.getInstance().show(this.state.service);
    } catch (error) {
    }
  }

  queryClusterStateList() {
    const {currentPage, pageSize, keyword, withInstances = false} = this.state;
    const parameter = [
      `withInstances=${withInstances}`,
      `pageNo=${currentPage}`,
      `pageSize=${pageSize}`,
      `keyword=${keyword}`,
    ];
    request({
      url: `v1/ns/operator/cluster/states?${parameter.join('&')}`,
      beforeSend: () = > this.openLoading(),
      success
  :
    ({count = 0, clusterStateList = []} = {}) =
  >
    {
      this.setState({
        dataSource: clusterStateList,
        total: count,
      });
    }
  ,
    error: () =
  >
    this.setState({
      dataSource: [],
      total: 0,
      currentPage: 0,
    }),
      complete
  :
    () =
  >
    this.closeLoading(),
  })
    ;
  }

  getQueryLater = () =
> {
  setTimeout(

() =>
  this
.

  queryClusterStateList()

)
  ;
};

setNowNameSpace = (nowNamespaceName, nowNamespaceId) =
>
this.setState({
  nowNamespaceName,
  nowNamespaceId,
});

rowColor = row =
>
({className: !row.voteFor ? '' : ''});

render()
{
  const {locale = {}} = this.props;
  const {
    pubNoData,
    clusterNodeList,
    nodeIp,
    nodeIpPlaceholder,
    query,
  } = locale;
  const {keyword, nowNamespaceName, nowNamespaceId} = this.state;
  const {init, getValue} = this.field;
  this.init = init;
  this.getValue = getValue;

  return (
    < div
  className = "main-container cluster-management" >
    < Loading
  shape = "flower"
  style = {
  {
    position: 'relative', width
  :
    '100%'
  }
}
  visible = {this.state.loading}
  tip = "Loading..."
  color = "#333"
    >
    < div
  style = {
  {
    marginTop: -15
  }
}>
<
  RegionGroup
  setNowNameSpace = {this.setNowNameSpace}
  namespaceCallBack = {this.getQueryLater}
  />
  < /div>
  < h3
  className = "page-title" >
    < span
  className = "title-item" > {clusterNodeList} < /span>
    < span
  className = "title-item" > | < /span>
    < span
  className = "title-item" > {nowNamespaceName} < /span>
    < span
  className = "title-item" > {nowNamespaceId} < /span>
    < /h3>
    < Row
  className = "demo-row"
  style = {
  {
    marginBottom: 10, padding
  :
    0
  }
}>
<
  Col
  span = "24" >
    < Form
  inline
  field = {this.field} >
    < FormItem
  label = {nodeIp} >
    < Input
  placeholder = {nodeIpPlaceholder}
  style = {
  {
    width: 200
  }
}
  value = {keyword}
  onChange = {keyword = > this.setState({keyword})
}
  onPressEnter = {() =
>
  this.setState({currentPage: 1}, () = > this.queryClusterStateList()
)
}
  />
  < /FormItem>
  < FormItem
  label = "" >
    < Button
  type = "primary"
  onClick = {() =
>
  this.setState({currentPage: 1}, () = > this.queryClusterStateList()
)
}
  style = {
  {
    marginRight: 10
  }
}
>
  {
    query
  }
<
  /Button>
  < /FormItem>
  < /Form>
  < /Col>
  < /Row>
  < Row
  style = {
  {
    padding: 0
  }
}>
<
  Col
  span = "24"
  style = {
  {
    padding: 0
  }
}>
<
  Table
  dataSource = {this.state.dataSource}
  locale = {
  {
    empty: pubNoData
  }
}
  getRowProps = {row = > this.rowColor(row)
}
>
<
  Column
  title = {locale.nodeIp}
  dataIndex = "nodeIp" / >
    < Column
  title = {locale.nodeState}
  dataIndex = "nodeState" / >
    < Column
  title = {locale.clusterTerm}
  dataIndex = "clusterTerm" / >
    < Column
  title = {locale.leaderDueMs}
  dataIndex = "leaderDueMs" / >
    < Column
  title = {locale.heartbeatDueMs}
  dataIndex = "heartbeatDueMs" / >
    < /Table>
    < /Col>
    < /Row>
  {
    this.state.total > this.state.pageSize && (
    < div
    style = {
    {
      marginTop: 10, textAlign
    :
      'right'
    }
  }>
  <
    Pagination
    current = {this.state.currentPage}
    total = {this.state.total}
    pageSize = {this.state.pageSize}
    onChange = {currentPage = >
      this.setState({currentPage}, () = > this.queryClusterStateList()
  )
  }
    />
    < /div>
  )
  }
<
  /Loading>
  < /div>
)
  ;
}
}

export default ClusterNodeList;
